<template>
  <div class="authorize_container">
    <div class="container_inner">
      <h5>店铺授权信息确认</h5>
      <div class="authorize_table">
        <div style="padding: 20px">
          <div class="img">
            <img alt="image" width="60" :src="pddImgSrc" />
          </div>
          <el-table :data="tableData" style="padding: 20px 20px 0">
            <el-table-column
              prop="shopId"
              label="编号"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="shopName"
              label="名称"
              min-width="240"
            ></el-table-column>
            <el-table-column
              prop="typeName"
              label="平台"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="创建时间"
              width="240"
            ></el-table-column>
          </el-table>
          <div class="user">
            <span>当前登录的账号：{{ userInfo }}</span>
          </div>
          <div class="button">
            <el-button>返回系统首页</el-button>
            <el-button type="primary" @click="addShopInfo"
              >授权至当前登录账户</el-button
            >
          </div>
          <div class="tips">
            <div>授权须知</div>
            <div>
              1.授权成功后则视为您同意此授权账户拥有当前授权店铺的所有操作权,其中包括店铺商品的上架删除、修改等敏感操作权限。
            </div>
            <div>
              2.授权成功后则视为您同意此账户下其他的店铺能同步当前授权的店铺数据信息,其中包括商品的复制、搬家、等商品数据读取操作权限。
            </div>
            <!-- <div>
                            从地址栏获取的参数：{{ $route.query }}
                        </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pddImgSrc from "@/assets/image/pdd.png";
import Cookies from "js-cookie";
import {
  getAccessToken,
  getMallInfo,
  generateShopId,
  addShopInfo,
} from "@/api/product/productInfo";

export default {
  data() {
    return {
      pddImgSrc,
      tableCode: "",
      tableData: [],
      userInfo: {},
      queryParams: [],
      tokenInfo: null,
    };
  },
  async mounted() {
    console.log("this.$route.query.state", this.$route.query.state);
    await this.generateShopId();
    this.handleGetCode();
    this.userInfo = Cookies.get("agtPhone");
  },
  methods: {
    handleGetCode() {
      const params = {
        code: this.$route.query.code,
        platformId: 0,
        shopId: 0,
        shopType: this.$route.query.state,
      };
      getAccessToken(params).then((res) => {
        this.tokenInfo = res.value;
        delete this.tokenInfo.scope;
        this.getMallInfo(res.value.accessToken);
      });
    },
    getMallInfo() {
      const params = {
        accessToken: this.tokenInfo.accessToken,
      };
      getMallInfo(params).then((res) => {
        this.tableData = [
          {
            ...res.value,
            accessTokenValue: this.tokenInfo.accessToken,
            shopType: this.$route.query.state,
            typeName: this.$route.query.state == "pdd" ? "拼多多" : "",
            shopId: this.tableCode,
            ...this.tokenInfo,
          },
        ];
      });
    },
    // 生成随机店铺id
    generateShopId() {
      return new Promise((resolve) => {
        generateShopId().then((res) => {
          this.tableData.push({ code: res.value });
          this.tableCode = res.value;
          resolve();
        });
      });
    },
    // 新增店铺
    addShopInfo() {
      const pamras = this.tableData[0];
      delete pamras.typeName;
      addShopInfo(pamras).then((res) => {
        this.$message.success("新增成功");
        setTimeout(() => {
          window.open("account/shop", "_blank");
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss" scope>
.authorize_container {
  background-color: #efefef;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .container_inner {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);

    & > h5 {
      font-weight: normal;
      font-size: 40px;
      margin-top: 0;
    }

    .authorize_table {
      width: 1000px;
      background-color: #fff;
      border-radius: 10px;
      border-bottom: 1px dashed #ccc;
    }

    .img {
      padding: 20px 0;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }
    .user {
      height: 60px;
      line-height: 60px;
      margin-left: 40px;
    }
    .button {
      text-align: center;
      margin: 20px;
    }
    .tips {
      box-sizing: border-box;
      padding: 20px;
      // margin: 20px;
      background-color: #fff3cd;
      border-radius: 10px;
      & > div {
        margin-bottom: 20px;
        line-height: 25px;
      }
    }
  }
}
</style>